var port = null;
var rules = {};

function readRule(rowElement) {
  console.log(rowElement);
  rule = {}
  rule.rule_type = rowElement.getElementsByTagName("select")[0].value;
  inputs = rowElement.getElementsByTagName("input");
  rule.time1 = inputs[0].value;
  rule.time2 = inputs[1].value;
  urls = inputs[3].value.split(",");
  for (urlNum in urls) {
    if (!urls[urlNum].lastIndexOf("http") == 0) {
      urls[urlNum] = "http://" + urls[urlNum];
    }
  }
  inputs[3].value = urls.join(",");
  rule.urls = urls;

  rule.interval = parseInt(inputs[4].value);
  if (rule.interval == NaN || rule.interval < 1) {
    rule.interval = 1;
  }
  // console.log(rule);
  return rule;
}

function readRules() {
  cont = document.getElementById("schedule-container");
  ruleElements = cont.getElementsByTagName("div");
  rules = []
  console.log(ruleElements);
  for (i = 0; i < ruleElements.length; ++i) {
    rule = readRule(ruleElements[i]);
    if (rule.urls[0] != "") {
      rules.push(rule);
    }
  }
  // console.log(rules);
}

function startTimer() {
  console.log("Lets start");
  readRules();
  port.postMessage({cmd: "start", rules: rules});
}

function populateUIFromRules(rules) {
  cont = document.getElementById("schedule-container");
  temp = document.getElementById("rule-row-template");
  cont.innerHTML = "";
  for (ruleNum in rules) {
    rule = rules[ruleNum];
    newRow = document.createElement("div");
    newRow.innerHTML = temp.innerHTML;
    newRow.getElementsByTagName("select")[0].value = rule.rule_type;
    inputs = newRow.getElementsByTagName("input");
    if (rule.hasOwnProperty("time1")) {
      inputs[0].value = rule.time1;
    }
    if (rule.hasOwnProperty("time2")) {
      inputs[1].value = rule.time2;
    }
    if (rule.hasOwnProperty("urls")) {
      inputs[3].value = rule.urls.join(",");
    }
    if (rule.hasOwnProperty("interval")) {
      inputs[4].value = rule.interval;
    }
    // Set the handler for the delete button.
    registerRowDeleteHandler(newRow);
    cont.appendChild(newRow);
  }
}

function registerRowDeleteHandler(rowDiv) {
  newRow.getElementsByClassName("delete-button")[0].addEventListener("click",
      function() {
        rowDiv.parentElement.removeChild(rowDiv);
      });
}

document.addEventListener('DOMContentLoaded', function() {
  port = chrome.runtime.connect({name: "timed_url"});
  port.postMessage({cmd: "get_rules"});
  port.onMessage.addListener(function(msg) {
    populateUIFromRules(msg);
    console.log(msg);
  });
  // Setup the click handlers for the buttons.
  startBtn = document.getElementById("start-button");
  startBtn.addEventListener("click", startTimer);
  stopBtn = document.getElementById("stop-button");
  stopBtn.addEventListener("click", function() {
    console.log("stop");
    port.postMessage({cmd: "stop"});
  });
  addBtn = document.getElementById("add-button");
  addBtn.addEventListener("click", function() {
    cont = document.getElementById("schedule-container");
    temp = document.getElementById("rule-row-template");
    newRow = document.createElement("div");
    newRow.innerHTML = temp.innerHTML;
    registerRowDeleteHandler(newRow);
    cont.appendChild(newRow);
  });
});